<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:atom="http://www.w3.org/2005/Atom">
  <xsl:output method="html" encoding="UTF-8" indent="yes" />
  <xsl:template name="format-date">
    <xsl:param name="date" />
    <xsl:variable name="short" select="substring($date, 1, 10)" />
    <xsl:variable name="year" select="substring($short, 1, 4)" />
    <xsl:variable name="month" select="substring($short, 6, 2)" />
    <xsl:variable name="day" select="number(substring($short, 9, 2))" />
    <xsl:variable name="monthName">
      <xsl:choose>
        <xsl:when test="$month='01'">January</xsl:when>
        <xsl:when test="$month='02'">February</xsl:when>
        <xsl:when test="$month='03'">March</xsl:when>
        <xsl:when test="$month='04'">April</xsl:when>
        <xsl:when test="$month='05'">May</xsl:when>
        <xsl:when test="$month='06'">June</xsl:when>
        <xsl:when test="$month='07'">July</xsl:when>
        <xsl:when test="$month='08'">August</xsl:when>
        <xsl:when test="$month='09'">September</xsl:when>
        <xsl:when test="$month='10'">October</xsl:when>
        <xsl:when test="$month='11'">November</xsl:when>
        <xsl:when test="$month='12'">December</xsl:when>
      </xsl:choose>
    </xsl:variable>
    <xsl:value-of select="concat($monthName, ' ', $day, ', ', $year)" />
  </xsl:template>
  <xsl:template match="/">
    <html>
      <head>
        <title>RSS Feed | <xsl:value-of select="/rss/channel/title" /></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
        <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
        <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="preload" href="/fonts/GeistVF.woff2" as="font" type="font/woff2" />
        <link rel="preload" href="/fonts/Lexend-VariableFont_wght.woff2" as="font" type="font/woff2" />
        <link rel="preload" href="/fonts/ZhudouSansVF-subset.woff2" as="font" type="font/woff2" />
        <link rel="preload" href="/fonts/GeistMono.woff2" as="font" type="font/woff2" />
        <!-- <link rel="stylesheet" href="/fonts/ShangguSansSC-VF/result.css" /> -->
        <link rel="stylesheet" href="/rss/rss.css" />
        <script src="/js/theme.js"></script>
      </head>
      <body>
        <header>
          <h1>
            <xsl:value-of select="/rss/channel/title" />
          </h1>
          <p class="subtitle">
            <xsl:value-of select="/rss/channel/description" />
          </p>
          <a href="{/rss/channel/link}" class="button">
            <span>Visit site</span>
            <svg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
              <path d="M7 17l10-10M13 7h4v4" />
              <path d="M17 7v0" />
            </svg>
          </a>
        </header>
        <main>
          <ul class="posts">
            <xsl:for-each select="/rss/channel/item">
              <li class="post">
                <a class="post-link" href="{link}">
                  <span class="title">
                    <xsl:value-of select="title" />
                  </span>
                </a>
                <div class="meta">
                  <time>
                    <span class="badge">Updated</span>
                    <xsl:call-template name="format-date">
                      <xsl:with-param name="date" select="updated" />
                    </xsl:call-template>
                  </time>
                </div>
                <p class="summary">
                  <xsl:value-of select="description" />
                </p>
              </li>
            </xsl:for-each>
          </ul>
        </main>
        <div class="belonging">This is a RSS Feed generated by <a href="https://litos.vercel.app/"
            target="_blank">Litos</a>. RSS readers can use the URL in the address bar.</div>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>